<template>
    <div id="wrapper">
        <el-container>
            <el-header style="padding: 5px">
                <el-row>
                    <el-col :span="15">
                        <el-tooltip placement="bottom">
                            <div slot="content">返回上一级</div>
                            <el-button type="success" size="mini" icon="el-icon-top" plain
                                       :disabled="(catalogue.length <= 1)"
                                       @click="onClickCatalogue(catalogue[catalogue.length - 2])"/>
                        </el-tooltip>
                        <span v-for="(item,index) in catalogue" :key="index">
                            /<span class="catalogue" @click="onClickCatalogue(item)">{{item.FileName}}</span>
                        </span>
                    </el-col>
                    <el-col :span="9">
                        <el-form :inline="false" :model="query" ref="ProjectFileQuery_ref"
                                 class="selectFrom demo-form-inline" label-position="right">
                            <el-col :span="24 - powerSpan">
                                <el-form-item :prop="query.FileName">
                                    <el-input placeholder="文件名" v-model="query.FileName" class="input-with-select">
                                        <el-button slot="append" icon="el-icon-search" @click="ClickQuery"></el-button>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="powerSpan" style="text-align: right">
                                <el-tooltip placement="bottom" v-if="power.FileRightAdd">
                                    <div slot="content">新建文件夹</div>
                                    <el-button
                                            @click="contextMenuClick('addFolder')">
                                        <i class="el-icon-folder-add"/>
                                    </el-button>
                                </el-tooltip>
                                <el-tooltip placement="bottom" v-if="power.FileRightAdd">
                                    <div slot="content">上传文件</div>
                                    <el-button
                                            @click="contextMenuClick('upload')">
                                        <i class="el-icon-document-add"/>
                                    </el-button>
                                </el-tooltip>
                                <el-tooltip placement="bottom"
                                            v-if="project.HeadUserId === $store.state.user.id || $store.state.user.id === 1">
                                    <div slot="content">项目文件权限</div>
                                    <el-button
                                            @click="contextMenuClick('power')">
                                        <i class="el-icon-s-tools"/>
                                    </el-button>
                                </el-tooltip>
                            </el-col>
                        </el-form>
                    </el-col>
                    <el-col :span="4" style="text-align: right">

                    </el-col>
                </el-row>
            </el-header>
            <el-divider></el-divider>
            <span style="color: #999999;font-size: 12px;margin-left: 5px">
                右键文件有下载删除等，右键边框内的空白区域有新建文件夹和上传文件等，双击文件夹可以打开文件夹，双击文件可以预览，上方目录可以点击跳转
            </span>
            <el-main style="padding: 5px">
                <div v-if="contextMenu.show">
                    <div style=" position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0);z-index: 99"
                         @click="ContextMenuOff()" @contextmenu.prevent="ContextMenuOff()"></div>
                    <ul :style="{left:contextMenu.left+'px',top:contextMenu.top+'px'}" class="contextmenu">
                        <li v-if="contextMenu.operKey === 'big' && !contextMenu.isIcon"
                            @click="contextMenuClick('table')">
                            <el-button type="text" size="mini">详细数据查看</el-button>
                        </li>
                        <li v-if="contextMenu.operKey === 'table' && !contextMenu.isIcon"
                            @click="contextMenuClick('big')">
                            <el-button type="text" size="mini">大图标查看</el-button>
                        </li>
                        <li v-if="!contextMenu.isIcon" @click="contextMenuClick('reload')">
                            <el-button type="text" size="mini">刷新</el-button>
                        </li>
                        <li v-if="!contextMenu.isIcon && power.FileRightAdd" @click="contextMenuClick('addFolder')">
                            <el-button type="text" size="mini">新建文件夹</el-button>
                        </li>
                        <li v-if="!contextMenu.isIcon && power.FileRightAdd" @click="contextMenuClick('upload')">
                            <el-button type="text" size="mini">上传文件</el-button>
                        </li>
                        <li v-if="contextMenu.isIcon && power.FileRightDown && contextMenu.data.FileStateType"
                            @click="contextMenuClick('download')">
                            <el-button type="text" size="mini">下载</el-button>
                        </li>
                        <li v-if="contextMenu.isIcon && contextMenu.data.FileStateType"
                            @click="contextMenuClick('preview')">
                            <el-button type="text" size="mini">预览</el-button>
                        </li>
                        <li v-if="contextMenu.isIcon && power.FileRightDel" @click="contextMenuClick('del')">
                            <el-button type="text" size="mini">删除</el-button>
                        </li>
                        <li v-if="power.FileRightDel" @click="contextMenuClick('dels')">
                            <el-button type="text" size="mini">多选删除</el-button>
                        </li>
                        <li v-if="contextMenu.isIcon && power.FileRightUpdate" @click="contextMenuClick('rename')">
                            <el-button type="text" size="mini">重命名</el-button>
                        </li>
                    </ul>
                </div>
                <div v-show="contextMenu.operKey === 'table'" style="width: 100%;">
                    <ul class="tablemenu" @contextmenu.prevent="onIconContextmenu({},'table')">
                        <li style="padding-bottom: 10px">
                            <el-row>
                                <el-col :span="4">
                                    文件名
                                </el-col>
                                <el-col :span="4">
                                    <el-divider direction="vertical"></el-divider>
                                    上传日期
                                </el-col>
                                <el-col :span="4">
                                    <el-divider direction="vertical"></el-divider>
                                    类型
                                </el-col>
                                <el-col :span="4">
                                    <el-divider direction="vertical"></el-divider>
                                    大小
                                </el-col>
                                <el-col :span="8">
                                    <el-divider direction="vertical"></el-divider>
                                </el-col>
                            </el-row>
                        </li>
                        <div id="fileTbaleDiv" style="width: 100%;overflow-y: auto">
                            <el-row>
                                <el-col :span="16">
                                    <li v-for="(item,index) in tableData" :key="index"
                                        :class="{libackgroundId:item.Id === libackgroundId}"
                                        style="margin-top: 10px;line-height: 50px">
                                        <el-row>
                                            <div
                                                    @contextmenu.prevent.stop="onIconContextmenu(item,'icon')"
                                                    @dblclick="onDbclick(item)">
                                                <el-col :span="6" style="height: 50px">
                                                    <el-tooltip placement="bottom">
                                                        <div slot="content">
                                                            {{item.FileName}}
                                                        </div>
                                                        <el-button
                                                                style="width: 100%;background: none;border: none;padding: 0;">
                                                            <el-col :span="6">
                                                                <img :src="imgShow.indexOf(item.FileType) >= 0
                                                                     ? (ResourcesPath + item.FilePath)
                                                                     : ('/image/file/' + (item.FileStateType ?
                                                                     (flieType.indexOf(item.FileType) >= 0 ? item.FileType : 'file') : 'folder') + '.png') "
                                                                     width="40px" height="40px"/>
                                                            </el-col>
                                                            <el-col :span="18"
                                                                    style="text-overflow: ellipsis;white-space: nowrap; overflow: hidden;text-align: left;line-height: 50px">
                                                                {{item.FileName}}
                                                            </el-col>
                                                        </el-button>
                                                    </el-tooltip>
                                                </el-col>
                                                <el-col :span="6" style="padding-left: 20px">
                                                    {{item.OperatDate ? item.OperatDate : "暂无"}}
                                                </el-col>
                                                <el-col :span="6" style="padding-left: 20px">
                                                    {{(item.FileStateType ? item.FileType + '文件': '文件夹')}}
                                                </el-col>
                                                <el-col :span="6" style="padding-left: 20px">
                                                    {{item.FileSize}}
                                                </el-col>
                                            </div>
                                        </el-row>
                                    </li>
                                </el-col>
                                <el-col :span="8">

                                </el-col>
                            </el-row>
                        </div>
                    </ul>
                </div>
                <div v-show="contextMenu.operKey === 'big'"
                     style="width: 100%;overflow-y: auto;border:1px #cccccc solid" id="fileBigDiv"
                     @contextmenu.prevent="onIconContextmenu({},'big')"
                >
                    <div v-for="(item,index) in tableData" :key="index"
                         :class="{libackgroundId:item.Id === libackgroundId,fileBigDiv:true}"
                         @contextmenu.prevent.stop="onIconContextmenu(item,'icon')"
                         @dblclick="onDbclick(item)">
                        <el-tooltip placement="bottom">
                            <div slot="content">
                                {{item.FileName + (item.FileStateType ? "." + item.FileType : "")}}
                            </div>
                            <el-button style="width: 100%;background: none;border: none;padding: 0">
                                <img :src="imgShow.indexOf(item.FileType) >= 0
                                ? (ResourcesPath + item.FilePath) :('/image/file/' + (item.FileStateType ?
                                 (flieType.indexOf(item.FileType) >= 0 ? item.FileType : 'file') : 'folder') + '.png') "
                                     width="80px" height="80px"/>
                                <br/>
                                <span>{{item.FileName + (item.FileStateType ? "." + item.FileType : "")}}</span>
                            </el-button>
                        </el-tooltip>
                    </div>
                </div>
            </el-main>
        </el-container>
        <el-dialog :modal="false" :visible.sync="operData.show" :title="operData.title" v-if="operData.show"
                   :width="(operData.data.width ? operData.data.width + 'px' : '800px')"
                   :top="(operData.operKey === 'iframe' ? '0': '100px')"
                   :before-close="onClose">
            <!--            上传文件-->
            <div v-if="operData.operKey === 'upload'" style="text-align: center">
                <el-upload
                        style="width: 360px"
                        drag
                        class="upload-demo"
                        ref="uploadClick"
                        :headers="{
                            Authorization:Authorization,
                            // 'Content-Type':'multipart/mixed;boundary=batch_AAA123',
                        }"
                        :action="BasePath + 'api/KnowledgeFile/FileRightAdd'"
                        :on-change="UploadClickHandleChange"
                        :on-success="UploadClickHandleSuccess"
                        :on-remove="UploadClickHandleRemove"
                        :file-list="operData.fileList"
                        :data="operData.data"
                        list-type="picture"
                        :auto-upload="false"
                        multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text"><em>点击选取文件</em></div>
                </el-upload>
                <el-button plain type="success" @click="UploadClickHandleSubmit">提交</el-button>
            </div>
            <!--            添加文件夹或者重命名-->
            <div v-if="operData.operKey === 'addFolder' || operData.operKey === 'rename'">
                <el-form :model="operData.data" :inline="false" label-width="80px">
                    <el-form-item label="名称" :prop="operData.data.FileName"
                                  :rules="{ required: true, message: '请输入名称', trigger: 'blur' }">
                        <el-input type="text" property="请输入名称" v-model="operData.data.FileName">
                            <template slot="append">{{operData.data.FileStateType ? "."+operData.data.FileType : "文件夹"}}
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item style="text-align: center">
                        <el-button plain type="success" @click="OperSubmit_enent">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!--            多选删除-->
            <div v-if="operData.operKey === 'dels'">
                <el-form :model="operData.data" :inline="false" label-width="80px">
                    <el-form-item label="名称"
                                  :rules="{ required: true, message: '请选择', trigger: 'blur' }">
                        <el-checkbox-group v-model="operData.data.dels">
                            <el-row>
                                <el-col :span="24" v-for="(item,index) in tableData" :key="index">
                                    <div style="text-overflow: ellipsis;white-space: nowrap; overflow: hidden;">
                                        <el-checkbox name="type" :label="item.Id">
                                            <img :src="(item.FileType === 'jpg' || item.FileType === 'png' || item.FileType === 'gif' || item.FileType === 'webp') ? (ResourcesPath + item.FilePath) :
                                                                     ('/image/file/' + (item.FileStateType ?
                                                                     (flieType.indexOf(item.FileType) >= 0 ? item.FileType : 'file') : 'folder') + '.png') "
                                                 width="40px" height="40px"/>
                                            <div style="margin-left: 60px;margin-top: -35px">{{item.FileName +
                                                (item.FileStateType ? ('.' + item.FileType) : '')}}
                                            </div>
                                        </el-checkbox>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item style="text-align: center">
                        <el-button plain type="success" @click="OperSubmit_enent">删除</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!--            项目文件权限-->
            <div v-if="operData.operKey === 'power'">
                <el-form :model="operData.data" :inline="false" label-width="80px">
                    <el-form-item>
                        <template slot="label">
                            <el-tooltip class="item" effect="dark" content="添加人员到一个权限时其他权限会一起相应增加人员" placement="top-start">
                                <el-button style="padding: 0;margin: 0;border:none">权限同步</el-button>
                            </el-tooltip>
                        </template>
                        <el-switch
                                v-model="powerArray.isAdd"
                                active-text="是"
                                inactive-text="否">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="添加权限">
                        <el-select
                                @change="onPowerChange('FileRightAdd')"
                                :filterable="true" v-model="operData.data.FileRightAdd" multiple placeholder="请选择"
                                style="width: 680px">
                            <el-option v-for="v in $store.state.AllUsers" v-if="v.InternshipState!==8"
                                       :label="v.UserName" :value="v.Id + ''"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="查看权限">
                        <el-select
                                @change="onPowerChange('FileRightView')"
                                :filterable="true" v-model="operData.data.FileRightView" multiple placeholder="请选择"
                                style="width: 680px">
                            <el-option v-for="v in $store.state.AllUsers" v-if="v.InternshipState!==8"
                                       :label="v.UserName" :value="v.Id + ''"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="下载权限">
                        <el-select
                                @change="onPowerChange('FileRightDown')"
                                :filterable="true" v-model="operData.data.FileRightDown" multiple placeholder="请选择"
                                style="width: 680px">
                            <el-option v-for="v in $store.state.AllUsers" v-if="v.InternshipState!==8"
                                       :label="v.UserName" :value="v.Id + ''"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="修改权限">
                        <el-select
                                @change="onPowerChange('FileRightUpdate')"
                                :filterable="true" v-model="operData.data.FileRightUpdate" multiple placeholder="请选择"
                                style="width: 680px">
                            <el-option v-for="v in $store.state.AllUsers" v-if="v.InternshipState!==8"
                                       :label="v.UserName" :value="v.Id + ''"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="删除权限">
                        <el-select
                                @change="onPowerChange('FileRightDel')"
                                :filterable="true" v-model="operData.data.FileRightDel" multiple placeholder="请选择"
                                style="width: 680px">
                            <el-option v-for="v in $store.state.AllUsers" v-if="v.InternshipState!==8"
                                       :label="v.UserName" :value="v.Id + ''"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="text-align: center">
                        <el-button plain type="success" @click="OperSubmit_enent">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!--            预览文件-->
            <iframe id="iframe" :style="{width:operData.data.width - 40 + 'px',height:operData.data.height + 'px'}"
                    v-if="operData.operKey === 'iframe'" :src="operData.data.src"/>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "ProjectFile",
        props: {
            projectlist: {
                type: Object,
                required: true,
            },
        },
        data() {
            return {
                project: {},
                // 目录展示数据
                catalogue: [],
                // 查询数据
                query: {
                    FileName: ""
                },
                // 是否查询
                isQuery: false,
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 10,
                    total: 0
                },
                // 显示数据
                tableData: [],
                // 所有数据
                data: [],
                // icon右键时改变改变背景颜色 点击的数据Id
                libackgroundId: "",
                //多选列表的数据集合
                SelectMore_lis: [],
                // token
                Authorization: "Bearer " + window.sessionStorage.getItem('token'),
                // 操作数据
                operData: {
                    show: false,
                    title: "",
                    operKey: "",
                    data: {},
                    fileList: []
                },
                // 显示右键事件
                contextMenu: {
                    show: false,
                    left: 0,
                    top: 0,
                    data: {},
                    operKey: "big"
                },
                // 可以展示的文件类型图片
                flieType: ["doc", "docx", "xls", "xlsx", "zip", "ppt", "pdf", "mp3", "m4a", "mp4", "txt", "pptx", "rar"],
                imgShow: ["jpg", "png", "jpeg", "gif", "webp"],
                // 权限
                power: {
                    // 添加
                    FileRightAdd: false,
                    // 删除
                    FileRightDel: false,
                    // 下载
                    FileRightDown: false,
                    // 修改
                    FileRightUpdate: false,
                },
                powerArray: {
                    isAdd: true,
                },
                powerSpan: 0,
                // 资源路径
                // ResourcesPath: 'http://192.168.0.150:8088/OAFile/2/',
                ResourcesPath: 'https://oa.guyuanct.com//OAFile/2/',
            }
        },
        mounted() {
            this.project = this.projectlist;
            this.catalogue = [{
                FileName: this.project.ProjectNumber,
                isProject: true,
                data: this.project,
                Id: 0,
                FilePath: this.project.Id + ""
            }];
            for (let k in this.power) {
                let fileRight = this.project[k].split(',');
                if (fileRight.indexOf(this.$store.state.user.id + "") >= 0
                    || +this.project.HeadUserId === +this.$store.state.user.id
                    || this.$store.state.user.id === 1
                ) {
                    this.power[k] = true;
                } else {
                    this.power[k] = false;
                }
            }
            if (this.power.FileRightAdd) {
                this.powerSpan = 6;
            }
            if (this.project.HeadUserId === this.$store.state.user.id || this.$store.state.user.id === 1) {
                this.powerSpan += 3;
            }
            document.getElementById("fileBigDiv").style.height = document.body.clientHeight - 205 + "px";
            document.getElementById("fileTbaleDiv").style.height = document.body.clientHeight - 245 + "px";
            this.formdata();
            this.isQuery = false;
            this.query.FileName = "";
        },
        methods: {
            formdata() {
                let loadding = this.openLoading();
                this.$http.post('KnowledgeFile/GetDirectoryFileInfo', {
                    "ProjectId": this.project.Id,
                    "KeyWord": ''
                }).then(res => {
                    loadding.close();
                    this.data = res.data.Data;
                    this.onClickCatalogue(this.catalogue[this.catalogue.length - 1]);
                }).catch(() => {
                    loadding.close();
                    this.$message.error('服务器异常,请联系管理员!')
                })
            },
            // 查询文件名
            ClickQuery() {
                if (this.query.FileName) {
                    let loadding = this.openLoading();
                    this.tableData = [];
                    for (let i = 0; i < this.data.length; i++) {
                        if (this.data[i].FileName.indexOf(this.query.FileName) >= 0) {
                            this.tableData.push(this.data[i])
                        }
                    }
                    loadding.close();
                    this.isQuery = true;
                } else {
                    this.onClickCatalogue(this.catalogue[this.catalogue.length - 1])
                }
            },
            /**
             * 查询数据
             * @param datas 数据
             * @param key 需要查询的字段
             * @param value 值
             * @returns {[]}
             */
            doQueryData(datas, key, value) {
                let data = [];
                for (let i = 0; i < datas.length; i++) {
                    if (datas[i][key] === value) {
                        data.push(datas[i])
                    }
                }
                return data;
            },
            /**
             * 点击目录
             * @param item  当前目录的数据
             */
            onClickCatalogue(item) {
                this.isQuery = false;
                this.query.FileName = "";
                let loadding = this.openLoading();
                if (this.catalogue.length === 1 || item.isProject) {
                    this.tableData = this.doQueryData(this.data, "PrId", 0)
                    this.catalogue = [this.catalogue[0]];
                } else {
                    this.tableData = this.doQueryData(this.data, "PrId", item.Id);
                    this.catalogue = [this.catalogue[0]];
                    this.doPrIdTocatalogue(item);
                    this.catalogue.push(item)
                }
                loadding.close();
            },
            /**
             * 根据一个PrId查询到根目录
             * @param item 当前目录数据
             */
            doPrIdTocatalogue(item) {
                let data = this.doQueryData(this.data, "Id", item.PrId);
                if (data.length) {
                    this.catalogue.splice(1, 0, data[0]);
                    this.doPrIdTocatalogue(data[0]);
                }
            },
            /**
             * 表格数据序列号
             * @param index 当前数据下标
             * @returns {*}
             */
            indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
            /**
             * 表格数据选择事件
             * @param value 选中的数据 []
             * @constructor
             */
            SelectionChange_event(value) {
                this.SelectMore_lis = value
            },
            /**
             * 背景右键事件 || 图标右键事件
             * @param data  当前点击图标数据
             * @param operKey  操作key值
             */
            onIconContextmenu(data, operKey) {
                if (this.contextMenu.show) {
                    this.ContextMenuOff();
                } else {
                    if (operKey === "icon") {
                        this.libackgroundId = data.Id;
                    } else {
                        this.libackgroundId = "";
                    }
                    let client = window.event;
                    var left = client.clientX + document.body.scrollLeft;//鼠标x位置
                    var top = client.clientY + document.body.scrollTop;//鼠标y位置
                    // 以防右键事件弹框在页面之外显示
                    if (top + 145 > document.body.clientHeight) top -= 145
                    if (left + 122 > document.body.clientWidth) left -= 122;
                    this.contextMenu = {
                        show: true,
                        left: left,
                        top: top,
                        data: data,
                        operKey: operKey === 'icon' ? this.contextMenu.operKey : operKey,
                        isIcon: operKey === 'icon',
                    }
                }
            },
            /**
             * 右键弹框内部事件
             * @param key 操作key值
             */
            contextMenuClick(key) {
                // 是否先搜索
                if (this.isQuery && (key === "addFolder" || key === "upload" || key === "reload")) {
                    this.$message.error("找不到搜索中的文件地址，不能新建，刷新和上传！");
                    this.ContextMenuOff();
                }
                // 详细数据查看
                else if (key === "table") {
                    this.ContextMenuOff();
                    this.contextMenu.operKey = "table";
                }
                // 大图标查看
                else if (key === "big") {
                    this.ContextMenuOff();
                    this.contextMenu.operKey = "big";
                }
                // 刷新
                else if (key === "reload") {
                    this.formdata();
                    this.ContextMenuOff();
                }
                // 删除单个
                else if (key === "del" && this.power.FileRightDel) {
                    this.$confirm('你确定要删除吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'error'
                    }).then(() => {
                        this.operData = {
                            show: false,
                            data: this.contextMenu.data,
                            title: "删除",
                            operKey: "del"
                        }
                        this.OperSubmit_enent();
                    }).catch(() => {
                        this.ContextMenuOff();
                    })
                }
                // 删除多个
                else if (key === "dels" && this.power.FileRightDel) {
                    this.operData = {
                        show: true,
                        data: {dels: []},
                        title: "多选删除",
                        operKey: key
                    }
                }
                // 重命名
                else if (key === "rename" && this.power.FileRightUpdate) {
                    this.operData = {
                        show: true,
                        data: this.contextMenu.data,
                        title: "重命名",
                        operKey: key
                    }
                }
                // 新建文件夹
                else if (key === "addFolder" && this.power.FileRightAdd) {
                    this.operData = {
                        show: true,
                        data: {
                            FileName: ""
                        },
                        title: "新建文件夹",
                        operKey: key
                    }
                }
                // 上传文件
                else if (key === "upload" && this.power.FileRightAdd) {
                    this.operData = {
                        show: true,
                        data: {
                            PrPath: this.catalogue[this.catalogue.length - 1].FilePath,
                            ProjectId: this.project.Id,
                            PrId: this.catalogue[this.catalogue.length - 1].Id,
                            NewFileName: "",
                        },
                        title: "上传文件",
                        operKey: key,
                        fileList: []
                    }
                }
                // 下载
                else if (key === "download" && this.power.FileRightDown && this.contextMenu.data.FileStateType) {
                    this.operData = {
                        show: false,
                        data: {},
                        title: "下载",
                        operKey: key,
                        fileList: []
                    }
                    this.OperSubmit_enent();
                    // window.location.href = (this.ResourcesPath + this.contextMenu.data.FilePath)
                }
                // 项目文件权限
                else if (key === "power") {
                    this.operData = {
                        show: true,
                        data: {
                            FileRightAdd: this.project.FileRightAdd.split(','),
                            FileRightDel: this.project.FileRightDel.split(','),
                            FileRightDown: this.project.FileRightDown.split(','),
                            FileRightUpdate: this.project.FileRightUpdate.split(','),
                            FileRightView: this.project.FileRightView.split(','),
                            ProjectId: this.project.Id,
                        },
                        title: "项目文件权限",
                        operKey: key,
                        fileList: []
                    }
                    this.powerArray = {
                        isAdd: true,
                        FileRightAdd: this.project.FileRightAdd.split(','),
                        FileRightDel: this.project.FileRightDel.split(','),
                        FileRightDown: this.project.FileRightDown.split(','),
                        FileRightUpdate: this.project.FileRightUpdate.split(','),
                        FileRightView: this.project.FileRightView.split(','),
                    }
                }
                // 预览
                else if (key === "preview") {
                    this.onDbclick(this.contextMenu.data);
                    this.ContextMenuOff();
                }
                // 不存在权限的
                else {
                    this.$message.error("很抱歉，您的权限等级不够，联系管理员!")
                    this.ContextMenuOff();
                }
            },
            /**
             * 关闭右键事件
             * @constructor
             */
            ContextMenuOff() {
                this.libackgroundId = "";
                this.contextMenu = {
                    show: false,
                    left: 0,
                    top: 0,
                    data: {},
                    operKey: this.contextMenu.operKey
                }
            },
            /**
             * 双击事件
             * @param item  当前双击的数据
             */
            onDbclick(item) {
                let loadding = this.openLoading();
                if (!item.FileStateType) {
                    this.isQuery = false;
                    this.query.FileName = "";
                    this.tableData = this.doQueryData(this.data, "PrId", item.Id);
                    this.catalogue = [this.catalogue[0]];
                    this.doPrIdTocatalogue(item);
                    this.catalogue.push(item)
                } else {
                    let noPreview = ["zip", "tif", "rar"];
                    if (noPreview.indexOf(item.FileType) >= 0) {
                        this.$message.error("当前文件不支持预览！")
                    } else {
                        this.previewFileEvent(item);
                    }
                }
                loadding.close();
            },
            /**
             * 预览文件事件
             * @param row 文件事件
             */
            previewFileEvent(row) {
                const typeArr = ['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx']
                let url = ''
                if (typeArr.indexOf(row.FileType) !== -1) {
                    // //XDOC文档预览服务地址
                    // url = "https://view.xdocin.com/view?src=";
                    // //传入文档地址
                    // url += encodeURIComponent(this.ResourcesPath + row.FilePath);
                    // //预览参数
                    // var ops = {
                    //     // "pdf": true, //word文档尝试以pdf方式显示，默认false
                    //     "watermark": "预览", //水印文本，显示水印
                    //     "saveable": false, //是否允许保存PDF，默认true
                    //     "printable": false, //是否允许打印PDF，默认true
                    //     "copyable": false, //是否允许选择复制内容，默认true
                    //     "toolbar": false, //是否显示底部工具条，默认true
                    //     "title": row.FileName, //自定义标题
                    //     // "expire": 30, //预览链接有效期，单位分钟，默认永久有效
                    //     // "limit": "1,3", //限制页数，如：“5”表示只显示前5页，“2,5”表示从第2页开始的5页，对pdf/doc/docx/ppt/pptx有效
                    //     // "mtime": "2021-10-01 21:10:01", //文件修改时间或时间戳（精确到秒，如：1633093801），值改变刷新缓存，实时预览
                    // };
                    // //传入预览参数
                    // for (var a in ops) {
                    //     url += "&" + a + "=" + encodeURIComponent(ops[a]);
                    // }
                    // 使用微软的office online
                    url = 'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(this.ResourcesPath + row.FilePath)
                } else {
                    url = (this.ResourcesPath + row.FilePath)
                }
                // window.open()居中打开
                // let reportMianShow = window.parent.document.getElementsByClassName("reportMianShow");
                // for (let i = 0; i < reportMianShow.length; i++) {
                //     reportMianShow[i].style.display = "none";
                // }
                // this.operData = {
                //     show: true,
                //     data: {
                //         width: document.body.clientWidth,
                //         src: url,
                //         height: document.body.clientHeight - 80,
                //     },
                //     title: "",
                //     operKey: "iframe",
                //     fileList: []
                // }
                const width = 1200;
                const height = 800
                const top = (window.screen.availHeight - height) / 2
                const left = (window.screen.availWidth - width) / 2
                // 如果为txt文件，用文件流方式预览，直接地址预览会出现乱码
                if (row.FileType === 'txt') {
                    this.$http.post('KnowledgeFile/DownloadFile', {
                        "FilePath": row.FilePath,
                        "FileStateType": row.FileStateType,
                        "ProjectId": this.project.Id,
                        "IsDownFile": false,
                    }, {responseType: "arraybuffer"}).then(res => {
                        const data = new Blob([res.data], {type: 'application/json;charset=utf-8'});
                        let blobUrl = window.URL.createObjectURL(data);
                        window.open(blobUrl, '_blank', 'width=' + width + ',height=' + height + ',top=' + top + ',left=' + left);
                    }).catch(() => {
                        this.$message.error('服务器异常,请联系管理员!')
                    })
                }
                // 其他文件直接地址预览
                else {
                    window.open(url, '_blank', 'width=' + width + ',height=' + height + ',top=' + top + ',left=' + left)
                }
            },
            /**
             * 操作请求服务器
             * @constructor
             */
            OperSubmit_enent() {
                let url = "", data = {}, Data = this.operData;
                // 删除单个
                if (Data.operKey === "del") {
                    url = "KnowledgeFile/SetDelknowPwoer";
                    data = {
                        "ProjectId": this.project.Id,
                        "knowPwoerId": Data.data.Id + "",
                    }
                }
                // 删除多个
                else if (Data.operKey === "dels") {
                    if (!Data.data.dels.length) {
                        this.ContextMenuOff();
                        this.operData = {
                            show: false,
                            title: "",
                            operKey: "",
                            data: {},
                            fileList: []
                        }
                        return;
                    }
                    url = "KnowledgeFile/SetDelknowPwoer";
                    data = {
                        "ProjectId": this.project.Id,
                        "knowPwoerId": Data.data.dels.join(','),
                    }
                }
                // 重命名
                else if (Data.operKey === "rename") {
                    if (!Data.data.FileName) {
                        this.$message.error("请输入名称！");
                        return;
                    }
                    url = "KnowledgeFile/SetUpNameknowPwoer";
                    data = {
                        "Id": Data.data.Id,
                        "FileStateType": Data.data.FileStateType,
                        "FileType": Data.data.FileType,
                        "PrId": Data.data.PrId,
                        "NewFileName": Data.data.FileName,
                    }
                }
                // 新建文件夹
                else if (Data.operKey === "addFolder") {
                    url = "KnowledgeFile/CreateProjectDirectory";
                    if (Data.data.FileName.indexOf(".") >= 0 || Data.data.FileName.indexOf("*") >= 0
                        || Data.data.FileName.indexOf("?") >= 0 || Data.data.FileName.indexOf("/") >= 0
                        || !Data.data.FileName
                    ) {
                        this.$message.error("名字中不能存在‘.?*/’这种符号");
                        return;
                    }
                    data = {
                        "Prid": this.catalogue[this.catalogue.length - 1].Id,
                        "PrFilePath": this.catalogue[this.catalogue.length - 1].FilePath,
                        "FileName": Data.data.FileName,
                        "ProjectId": this.project.Id,
                    }
                }
                // 上传文件
                else if (Data.operKey === "upload") {

                }
                // 下载
                else if (Data.operKey === "download") {
                    url = "KnowledgeFile/DownloadFile";
                    data = {
                        "FilePath": this.contextMenu.data.FilePath,
                        "FileStateType": this.contextMenu.data.FileStateType,
                        "ProjectId": this.project.Id,
                        "IsDownFile": true,
                    }
                }
                // 文件权限
                else if (Data.operKey === "power") {
                    url = "KnowledgeFile/SetknowPwoerInfo";
                    data = {
                        FileRightAdd: Data.data.FileRightAdd.join(","),
                        FileRightDel: Data.data.FileRightDel.join(","),
                        FileRightDown: Data.data.FileRightDown.join(","),
                        FileRightUpdate: Data.data.FileRightUpdate.join(","),
                        FileRightView: Data.data.FileRightView.join(","),
                        ProjectId: Data.data.ProjectId,
                    }
                }
                let loadding = this.openLoading();
                this.$http.post(url, data, {responseType: Data.operKey === "download" ? "arraybuffer" : ""}).then(res => {
                    loadding.close();
                    // 下载
                    if (Data.operKey === "download") {
                        //ArrayBuffer 转为 Blob
                        let blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
                        let that = this;
                        // const reader = new FileReader()
                        // reader.onload = function () {
                        //     const msg = JSON.parse(reader.result)
                        //     console.log(reader,msg)
                        //     if (msg === "该文件夹为空文件夹,不允许下载" || msg === "该文件夹或文件,路径地址错误请检查" ||
                        //         msg === "服务器发生错误" || msg === "很抱歉，您的访问权限等级不够，联系管理员!"
                        //     ) {
                        //         that.$message.error(msg);
                        //     }else{
                        //
                        //     }
                        // }
                        // reader.readAsText(blob)
                        let a = document.createElement('a');
                        let objectUrl = URL.createObjectURL(blob);
                        a.setAttribute("href", objectUrl);
                        a.setAttribute("download", that.contextMenu.data.FileName +
                            (that.contextMenu.data.FileStateType ? "." + that.contextMenu.data.FileType : ".zip"));
                        a.click();
                    }
                    // 设置权限
                    else if (Data.operKey === "power") {
                        this.$http.post("Project1/GetProjectDetail", {
                            Project: {
                                ProjectType: 0,
                                Id: this.project.Id,
                                MemberId: '',
                                HeadUserId: '',
                                DepartmentId: 0,
                            },
                            currentPage: 1,
                            pagesize: 10,
                            NoApproval: false,
                        }).then(res => {
                            if (res.data.data.length) {
                                this.$parent.$parent.formdata();
                                this.project = res.data.data[0];
                            } else {
                                this.$message.error('数据异常，请提出知识库刷新!')
                            }
                        })
                    }
                    // 其他
                    else if (res.data.Status) {
                        this.$message.success(res.data.Message)
                    } else {
                        this.$message.error(res.data.Message)
                    }
                    this.ContextMenuOff();
                    this.operData = {
                        show: false,
                        title: "",
                        operKey: "",
                        data: {},
                        fileList: []
                    }
                    this.formdata();
                }).catch((e) => {
                    loadding.close();
                    this.$message.error('服务器异常,请联系管理员!')
                })
            },
            /**
             * 上传发送变化的回调
             * @param file  当前文件
             * @param fileList  文件列表
             */
            UploadClickHandleChange(file, fileList) {
                // 文件大小大于50M
                if (file.size >= 1024 * 1024 * 20) {
                    this.$message.error("文件超过20M");
                    this.operData.fileList = [];
                    for (let i = 0; i < fileList.length - 1; i++) {
                        this.operData.fileList.push(fileList[i])
                    }
                } else {
                    this.operData.fileList.push(file)
                }
            },
            // 上传点击提交
            UploadClickHandleSubmit() {
                if (this.operData.fileList.length) {
                    this.$refs.uploadClick.submit();
                } else {
                    this.$message.error("请选择文件!");
                }
            },
            /**
             * 上传成功后的回调
             * @param response 服务器返回
             * @param file  当前文件
             * @param fileList  文件列表
             * @constructor
             */
            UploadClickHandleSuccess(response, file, fileList) {
                if (response.Status) {
                    this.$message.success(response.Message);
                } else {
                    this.$message.error(response.Message);
                }
                this.operData = {
                    show: false,
                    title: "",
                    operKey: "",
                    data: {},
                    fileList: []
                }
                this.ContextMenuOff();
                this.formdata();
            },
            /**
             * 删除上传成功
             * @param file  当前文件
             * @param fileList  文件列表
             * @constructor
             */
            UploadClickHandleRemove(file, fileList) {
                this.operData = {
                    show: false,
                    title: "",
                    operKey: "",
                    roleClick: true,
                    data: {},
                    fileList: []
                }
            },
            /**
             * 关闭弹框
             * @param done 关闭弹框函数
             * @returns {Promise<void>}
             */
            async onClose(done) {
                await done();
                this.ContextMenuOff();
                let reportMianShow = window.parent.document.getElementsByClassName("reportMianShow");
                for (let i = 0; i < reportMianShow.length; i++) {
                    reportMianShow[i].style.display = "inline-block";
                }
            },

            /**
             * 人员权限修改
             * @param key
             */
            onPowerChange(key) {
                if (this.powerArray.isAdd) {
                    // 判断当前是否是删除
                    let isDel = false;
                    for (let i = 0; i < this.powerArray[key].length; i++) {
                        if (this.operData.data[key].indexOf(this.powerArray[key][i]) < 0) {
                            isDel = true;
                            break;
                        }
                    }
                    if (!isDel) {
                        for (let k in this.operData.data) {
                            if (k !== "ProjectId" && k !== key) {
                                // 判断其他权限是否存在这个人员
                                if (this.operData.data[k].indexOf(this.operData.data[key][this.operData.data[key].length - 1]) < 0) {
                                    this.operData.data[k].push(this.operData.data[key][this.operData.data[key].length - 1])
                                }
                            }
                        }
                    }
                }
                this.powerArray[key] = this.operData.data[key]
            },
        },
    }
</script>

<style scoped>
    .fileBigDiv {
        width: 80px;
        height: 100px;
        float: left;
        margin: 10px 0px 0px 20px;
        overflow: hidden;
        text-align: center;
        z-index: 5;
    }

    .fileBigDiv:hover {
        background: rgba(133, 133, 133, 0.5);
    }

    .contextmenu {
        width: 120px;
        margin: 0;
        border: 1px solid #ccc;
        background: #fff;
        z-index: 100;
        position: absolute;
        list-style-type: none;
        padding: 5px 0;
        border-radius: 4px;
        font-size: 16px;
        color: #333;
        box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
    }

    .contextmenu li {
        margin: 0;
        padding: 0px 22px;
    }

    .contextmenu li:hover {
        background: #f2f2f2;
        cursor: pointer;
    }

    .contextmenu li button {
        color: #2c3e50;
        width: 100%;
        height: 100%;
        text-align: left;
    }

    .tablemenu {
        width: 100%;
        overflow: auto;
        margin: 0;
        border: 1px solid #ccc;
        background: #fff;
        list-style-type: none;
        padding: 5px 0;
        border-radius: 4px;
        font-size: 16px;
        color: #333;
        box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
    }

    .tablemenu li {
        margin: 0;
        padding: 0px 10px;
    }

    .tablemenu li:hover {
        background: rgba(133, 133, 133, 0.5);
        cursor: pointer;
    }

    .tablemenu li button {
        color: #2c3e50;
    }

    .libackgroundId {
        background: rgba(133, 133, 133, 0.5);
    }

    .catalogue {
        cursor: pointer;
        margin-left: 10px
    }

    .catalogue:hover {
        color: #1E9FFF;
    }
</style>